<template>
    <div class="toproof">
        <el-card>
            <div class="box-card">
                <div style="display: flex;">
                    <i v-show="!value" style="margin: 9px 10px 10px 10px; font-size: 20px;" class="el-icon-s-fold"
                        @click="unfold"></i>
                    <i v-show="value" style=" margin: 9px 10px 10px 10px;  font-size: 20px;" class="el-icon-s-unfold"
                        @click="display"></i>
                    <el-breadcrumb separator="/" style="margin: 11px 10px 10px 10px;">
                        <el-breadcrumb-item :to="{ path: item.path }" v-for=" (item, index) in $route.matched"
                            :key="index">{{ item.meta.title }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <!-- 面包屑 -->
                </div>
                <div style="display: flex; align-items: center;">
                    <div>
                        <i style="margin-left: 25px;" class="el-icon-delete"></i>
                        <i style="margin-left: 25px;" class="el-icon-delete"></i>
                        <el-dropdown :hide-on-click="true" style="margin-left: 25px;" trigger="click"
                            @command="handleCommand">
                            <span class="el-dropdown-link">
                                <i class="el-icon-delete"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">{{ $t('navbar.chinese')
                                }}</el-dropdown-item>
                                <el-dropdown-item command="en" :disabled="'en' === $i18n.locale">{{ $t('navbar.english')
                                }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>


                    <div style="display: flex;align-items: center;">
                        <el-avatar :size="40" :src="circleUrl" style="margin-left: 25px;"></el-avatar>
                        <span style="margin-left: 10px;">{{ "哈哈" }}</span>
                    </div>
                    <div style="margin-left: 10px;">
                        <el-dropdown @command="exit">
                            <span class="el-dropdown-link">
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                                <el-dropdown-item command="b">狮子头</el-dropdown-item>
                                <el-dropdown-item command="c">退出登陆</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
    name: "breadcrumb",
    // watch: {
    //     value(newvalue, oldvalue) {
    //         console.log(newvalue, "变化前");
    //         console.log(oldvalue, "变化后");
    //     }
    // },
    props: {
        to: {
            type: [String, Object]
        }
    },
    data() {
        return {
            breadcrumb: [],
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            value: false
        }
    },
    // created() {
    //     console.log(this.$route.matched, "面包屑路由里面的数据");
    // },
    methods: {

        handleCommand(lang) {
            // console.log(lang, '这是什么');
            this.$i18n.locale = lang // 设置给本地的i18n插件
            // console.log(this.$i18n, '语言切换数据');

        },

        ...mapMutations("tab", { selectmenu: 'selectmenu' }),
        unfold() {
            this.value = true
            this.selectmenu(this.value)

        },
        display() {
            this.value = false
            this.selectmenu(this.value)
        },
        exit(command) {
            if (command === 'a') {
                this.$store.commit('tab/setuser', {})
            }
        }

    }
}
</script>

<style lang="less" scoped>
.box-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
}

/deep/.el-card.is-always-shadow {
    border-top: none;
    border-right: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/deep/.el-card__body {
    padding: 8px;
}
</style>